昨天我們學了 margin、padding、border、gap，
今天來解決常遇到的怪問題：
「為什麼我設了 margin，結果它不見了？」

1. 問題現象：Margin Collapse（外距折疊）

情況：兩個垂直排列的元素，margin 會「合併」而不是「相加」

<style>
.box {
  background-color: lightblue;
  margin: 20px;
  height: 50px;
}
</style>

<div class="box">Box1</div>
<div class="box">Box2</div>

你以為：上下各 20px → 中間距離應該是 40px
實際上：只有 20px（折疊了 ᕕ ( ᐛ ) ᕗ！）

而為什麼會這樣呢?
那是因為 CSS 的規範：
垂直方向相鄰的 margin 會取較大的那個值，而不是加總

解法：

方法 A：使用 padding 或 border 阻止折疊

原理：padding 或 border 會阻止 margin 折疊，因為元素內部的空間或邊框存在，就不會跟外部元素 margin 相互折疊
範例：

HTML：

<div class="parent">
  <p>我是子元素</p>
</div>

CSS：

.parent {
  padding-top: 1px; /* 加一點內距 */
  /* 或透明邊框也可以 */
  /* border-top: 1px solid transparent; */
  background: #f1f1f1;
}

p {
  margin-top: 20px;
  background: #a0c4ff;
}

效果說明：

• padding-top: 1px 或 border-top 把折疊阻止掉
• 子元素 margin-top 不會折疊到父元素外面

這種技巧在多層容器排版時非常常用

方法 B：使用 flex 或 grid 排版 避免塊狀元素直接相鄰

原理：flex 或 grid 的子元素間距使用 gap 時，不會發生 margin 折疊

優點：不需要再額外加 padding 或 border，就能維持乾淨間距

範例：

HTML：

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS：

.container {
  display: flex;           /* 轉成彈性盒 */
  flex-direction: column;  /* 垂直排列 */
  gap: 20px;               /* 元素間距，不會折疊 */
  background: #f8f9fa;
  padding: 10px;
}

.item {
  background: #ffadad;
  padding: 10px;
}

效果說明：

• 每個子元素間距固定 20px，不會因 margin 折疊而變小
• gap 是專門用來管理「兄弟元素間距」的安全方法
• 適合卡片列表、表單欄位、按鈕群組等情況

padding/border：在父容器加點內距或邊框 → 阻止 margin 折疊

• 目的：讓子元素的 margin 「保留自己空間」
  flex/grid + gap：用現代排版工具 → 子元素間距不靠 margin 管理 → 乾淨、可控
• 目的：避免折疊問題，間距維護方便，RWD 更容易調整

2. Block vs Inline 的邊界陷阱

• Block 元素：獨占一行（div, p,h1, section）
• Inline 元素：與文字同行（span, a,strong）

範例：

<p>這是段落 <span class="highlight">重點</span> 文字</p>

<style>
.highlight {
  background-color: yellow;
  margin: 20px; /* 無效？ */
  padding: 5px; /* 有效 */
}
</style>

問題：margin: 20px; 對 span 沒作用？
原因：span 是 inline，不能用 margin-top / margin-bottom 撐開上下空間

解法：讓它變成 block 或 inline-block

.highlight {
  display: inline-block;
  margin: 20px;
}

補充寫法：